<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>座位图</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/css/jquery.seat-charts.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/css/style.css">
<script src="${pageContext.request.contextPath}/admin/js/jquery-1.8.3.min.js"></script> 
<script src="${pageContext.request.contextPath}/admin/js/jquery.seat-charts.min.js"></script> 
</head>
<body>
<div class="wrapper">
  <div class="container">
    <div id="seat-map"></div>
    
    <div class="booking-details">
    
      <ul id="selected-seats">
      </ul>
       
      <div id="legend"></div>
    </div>
    
  </div>
</div>
<input type="submit" value="保存">
<script>
			var firstSeatLabel = 1;
		
			$(document).ready(function() {
				var $cart = $('#selected-seats'),
					$counter = $('#counter'),
					$total = $('#total'),
					sc = $('#seat-map').seatCharts({
					map: [
						'eeeeeee_eeeeeee',
						'eeeeeee_eeeeeee',
						'eeeeeee_eeeeeee',
						'eeeeeee_eeeeeee',
						'eeeeeee_eeeeeee',
						'eeeeeee_eeeeeee',
						'eeeeeee_eeeeeee',
						'eeeeeee_eeeeeee',
						'eeeeeee_eeeeeee',
						'eeeeeee_eeeeeee',
					],
					seats: {
						f: {
							classes : 'first-class', //your custom CSS class
						},
						e: {
							classes : 'economy-class', //your custom CSS class
						}					
					
					},
					naming : {
						top : false,
						getLabel : function (character, row, column) {
							return firstSeatLabel++;
						},
					},
					legend : {
						node : $('#legend'),
					    items : [
							[ 'f', 'available',   '表示您' ],
							[ 'e', 'available',   '可选'],
							[ 'f', 'unavailable', '已预定']
					    ]					
					},
					click: function () {
						if (this.status() == 'available') {
							$counter.text(sc.find('selected').length+1);
							
							return 'selected';
						} else if (this.status() == 'selected') {
							//跟新数量
							$counter.text(sc.find('selected').length-1);

							//座位已腾空
							return 'available';
						} else if (this.status() == 'unavailable') {
							//座位已被预订
							return 'unavailable';
						} else {
							return this.style();
						}
					}
				});

				//处理取消链接点击
				$('#selected-seats').on('click', '.cancel-cart-item', function () {
					//在适当的座位上触发Click事件，所以不必在这里重复逻辑
					sc.get($(this).parents('li:first').data('seatId')).click();
				});

				//假装一些座位已经订了
				sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');
		
		});

		function recalculateTotal(sc) {
			var total = 0;
			return total;
		}
		
		</script>
</body>
</html>